<template>
  <div id="all">
    <div>
      <div class="content">
        <video-bg
          :sources="[require('../assets/vedio/loginbackground.mp4')]"
          img="src/assets/guanzhu.png"
        >
          <div id="login" v-if="!lrcode">
            <div
              style="
                font-size: 25px;
                font-weight: bold;
                margin-left: 120px;
                float: left;
                margin-top: 15px;
                text-align: center;
              "
            >
              用户登录
            </div>
            <div
              class="login_input"
              style="margin-top: 20px; margin-bottom: 15px"
            >
              <a-input
                placeholder="请输入用户名"
                v-model:value="uid"
                style="
                  margin-left: 45px;
                  margin-top: 4px;
                  width: 250px;
                  height: 30px;
                "
              >
                <template #prefix>
                  <img
                    src="/images/user.png"
                    style="width: 15px; margin-right: 5px"
                  />
                </template>
              </a-input>
            </div>
            <div class="login_input">
              <a-input-password
                placeholder="请输入密码"
                v-model:value="password"
                style="
                  margin-left: 45px;
                  margin-top: 4px;
                  width: 250px;
                  height: 30px;
                "
              >
                <template #prefix>
                  <img
                    src="/images/password.png"
                    style="width: 15px; margin-right: 5px"
                  />
                </template>
              </a-input-password>
            </div>
            <div class="login_button">
              <a-button class="btn" @click="login">登录</a-button>
              <a-button class="btn" @click="register">注册</a-button>
            </div>
          </div>

          <div
            v-if="lrcode"
            style="
              height: 100%;
              width: 350px;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              margin: auto;
              margin-top: 200px;
              opacity: 0.75;
              height: 280px;
              background-color: #fff;
              border-radius: 20px;
            "
          >
            <div
              style="
                font-size: 25px;
                font-weight: bold;
                margin-left: 120px;
                float: left;
                margin-top: 15px;
                text-align: center;
              "
            >
              用户注册
            </div>
            <div
              class="register_input"
              style="margin-top: 15px; margin-bottom: 15px"
            >
              <a-input
                placeholder="请输入用户名"
                v-model:value="uid"
                style="
                  margin-left: 45px;
                  margin-top: 4px;
                  width: 250px;
                  height: 30px;
                "
              >
                <template #prefix>
                  <img
                    src="/images/user.png"
                    style="width: 15px; margin-right: 5px"
                  />
                </template>
              </a-input>
            </div>
            <div class="register_input" style="margin-bottom: 15px">
              <a-input-password
                placeholder="请输入密码"
                v-model:value="password"
                style="
                  margin-left: 45px;
                  margin-top: 4px;
                  width: 250px;
                  height: 30px;
                "
              >
                <template #prefix>
                  <img
                    src="/images/password.png"
                    style="width: 15px; margin-right: 5px"
                  />
                </template>
              </a-input-password>
            </div>
            <div class="register_input" style="margin-bottom: 15px">
              <a-input-password
                placeholder="请再次输入密码"
                v-model:value="password"
                style="
                  margin-left: 45px;
                  margin-top: 4px;
                  width: 250px;
                  height: 30px;
                "
              >
                <template #prefix>
                  <img
                    src="/images/password.png"
                    style="width: 15px; margin-right: 5px"
                  />
                </template>
              </a-input-password>
            </div>
            <div class="register_button">
              <a-button @click="relogin" class="btn"> 返回 </a-button>
              <a-button class="btn" @click="realRegister">注册</a-button>
            </div>
          </div>
        </video-bg>
      </div>
    </div>
  </div>
</template>

<script>
import VideoBg from "vue-videobg";
import { UserOutlined, InfoCircleOutlined } from "@ant-design/icons-vue";
import { defineComponent } from "vue";
export default {
  name: "Login",
  components: {
    VideoBg,
  },
  data() {
    return {
      uid: "",
      password: "",
      realPassword: "",
      lrcode: 0,
    };
  },
  created() {},
  methods: {
    getUser() {
      //后端请求用户信息要设置 pageSize
      const url = "/user/getAllPaging?pageNo=1&pageSize=100";
      this.$axios({
        method: "get",
        url: url,
      })
        .then((res) => {
          const usr = res.data.data.records.filter((data) => {
            return data.uid == this.uid;
          });
          this.realPassword = usr[0].password;
          this.id = usr[0].id;
          this.$store.commit("saveUid", this.uid);
          this.$store.commit("saveId", this.id);
          if (this.password == this.realPassword) {
            // this.$router.push({ name: "Class", params: {} });
            this.$router.push({ name: "PoemHome", params: {} });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    login() {
      this.getUser();
    },
    register() {
      this.lrcode = 1;
      const data = this.$axios.get("/course/getAll");
      console.log(data);
    },
    relogin() {
      this.lrcode = 0;
    },
    realRegister() {
      const data = {
        password: this.password,
        uid: this.uid,
      };
      const url = "/user/add";
      this.$axios({
        method: "post",
        url: url,
        data,
      })
        .then((res) => {
          console.log(res);
          this.lrcode = 0;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
#all {
  background-image: url("../assets/bc4.png");
  width: 101%;
  height: 101%;
  position: fixed;
  background-size: 100% 100%;
  margin-top: -2px;
}
#login {
  float: left;
  width: 350px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  margin-top: 200px;
  opacity: 0.75;
  height: 280px;
  background-color: #fff;
  border-radius: 20px;
}
.input {
  width: 200px;
  margin-top: 4px;
  height: 30px;
  border: 1 solid;
}
.input.hover {
  border: 1 solid;
}
.register_input {
  float: left;
  margin-left: 5px;
}
.login_input {
  float: left;
  margin-left: 5px;
  margin-top: 0px;
}
.login_p {
  float: left;
  margin-left: 25px;
  font-size: 15px;
}
.register_button {
  float: left;
  margin-left: 45px;
  margin-top: 10px;
}
.login_button {
  float: left;
  margin-left: 45px;
  margin-top: 30px;
}
.btn {
  width: 100px;
  height: 30px;
  margin-left: 20px;
}
</style>
